@use "sass:map";

/* 引入主题数据 */
@use "themes.scss" as *;

/* 引入全局属性 */
@use "global" as *;

/* 定义全局变量 */
$curTheme: 'light';

/* sass混合 */
@mixin useTheme() {
    @each $key, $value in $themes {
        /* 修改全局变量，保存当前主题 */
        $curTheme : $key !global; 
        /* 差值 相当于模版字符串 */
        html[data-theme='#{$key}'] &{
            /* 相当于vue里的插槽 */
            @content;
        }
    }   
}

/* sass函数: 从当前主题对象里拿到相应的值，$key是属性名 */
@function getVar($key) {
    $themeMap : map.get($themes, $curTheme);
    @return map.get($themeMap, $key);
}

.item{
    width: 100%;
    height: 100%;
    @include useTheme {
        background-color: getVar('bgColor');
        color: getVar('textColor');
    };
    button{
        @include useTheme{
            color: getVar('textColor');
            background-color: getVar('btnBgColor');
        }
    }
}



